<template>
  <div class="chooes_sort_div">
    <!-- 选择排序方式组件 -->
    <!-- 分四列 -->
    <van-row>
      <!-- 最新 -->
      <van-col span="6" @click="search({type:'new'})" :class="search_condition.search == 'new' ? 'chooesSort':''">最新</van-col>
      <!-- 收藏 -->
      <van-col span="6"  @click="search({type:'collection'})" :class="search_condition.search == 'collection' ? 'chooesSort':''">收藏</van-col>
      <!-- 价格 -->
      <van-col span="6"  @click="search({type:'price'})" :class="search_condition.search == 'price' ? 'chooesSort':''">
        <span>价格</span>
        <span class="sort">
          <i class="icon-sort-up" :class="search_condition.isok == 'true' ? 'on_top':''"></i>
          <i class="icon-sort-down" :class="search_condition.isok == 'false' ? 'on_bot':''"></i>
        </span>
      </van-col>
      <!-- 筛选 -->
      <van-col span="6" class="left_border" @click="$router.push('/search')">筛选</van-col>
    </van-row>
  </div>
</template>
<script>
export default {
  name:"ChooesSort",
  props:["search_condition"],
  data() {
    return {
      isok:false
    }
  },
  methods: {
    // 二次筛选
    search(val){
      // 触发父级
      let obj = {};
      if(val.type == "price"){
        this.$emit("search_sort",{type:"price",slot:!this.isok});
        this.isok = !this.isok;
        return;
      }
      this.$emit("search_sort",val);
    },
  },
}
</script>
<style lang="less" scoped>
  .chooes_sort_div{
    position: fixed;
    z-index: 1;
    background-color: #fff;
    top: 0.45rem;
    width: 100%;
    border-top: 0.01rem solid #F5F5F5;
    border-bottom: 0.01rem solid #F5F5F5;
    height: 0.45rem;
    overflow: hidden;
    font-size: 0.12rem;
    text-align: center;
    line-height: 0.45rem;
  }
  .left_border{
    border-left: 0.01rem solid #F5F5F5;
  }
  .sort{
    display: inline-block;
    position: relative;
    width: .1rem;
    height: .025rem;
    margin-left: .05rem;
    vertical-align: middle;
    transform: translateY(-0.02rem);
  }
  .icon-sort-up{
    position: absolute;
    left: 0;
    width: .01rem;
    height: .06rem;
    border: .04rem solid transparent;
    transition: border-color .3s ease;
    bottom: 100%;
    border-bottom-color: #d8d8d8;
  }
  .icon-sort-down{
    position: absolute;
    left: 0;
    width: .01rem;
    height: .06rem;
    border: .04rem solid transparent;
    transition: border-color .3s ease;
    top: 100%;
    border-top-color: #d8d8d8;
  }
  .on_top{
    border-bottom-color: #e74e4b;
  }
  .on_bot{
    border-top-color: #e74e4b;
  }
  // 当前选中的排序方式
  .chooesSort{
    color: #E74E4B;
  }
</style>